<template>
  <div>
    <Editor v-model="contentValue" :init="init" :disabled="disabled" :placeholder="placeholder" :id="tinymceId" @onClick="onClick" />
  </div>
</template>

<script setup>
import { ref, defineEmits, onMounted, watch } from 'vue'
import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver'
import 'tinymce/icons/default'
import 'tinymce/models/dom'

import 'tinymce/plugins/code' // 编辑源码
import 'tinymce/plugins/image' // 插入编辑图片
import 'tinymce/plugins/media' // 插入视频
import 'tinymce/plugins/link' // 超链接
import 'tinymce/plugins/preview' // 预览
import 'tinymce/plugins/template' // 模板
import 'tinymce/plugins/table' // 表格
import 'tinymce/plugins/pagebreak' // 分页
import 'tinymce/plugins/lists' // 列
import 'tinymce/plugins/advlist' // 列
import 'tinymce/plugins/quickbars' // 快速工具条

import File from '@/api/sys/file'

onMounted(() => {
  tinymce.init({})
})

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
    default: '',
  },
  height: {
    type: Number,
    default: 600,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  plugins: {
    type: [String, Array],
    default: 'code image media link preview table quickbars template pagebreak lists advlist',
  },
  toolbar: {
    type: [String, Array],
    default:
      'undo redo |  forecolor backcolor bold italic underline strikethrough link | blocks fontfamily fontsize | \
					alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | pagebreak | \
					image media table template preview | code selectall',
  },
  templates: {
    type: Array,
    default: () => [],
  },
})

// 文章内容
const contentValue = ref(props.modelValue)

const tinymceId = ref('vue-tinymce-' + new Date().getTime() + '' + (Math.random() * 1000).toFixed(0))

const init = ref({
  selector: '#' + tinymceId.value,
  language_url: '/src/components/TinymceEditor/languages/zh_CN.js',
  language: 'zh_CN',
  skin_url: '/src/components/TinymceEditor/skins/ui/oxide',
  content_css: '/src/components/TinymceEditor/skins/content/default/content.css',
  menubar: 'edit view insert format tools table',
  plugins: props.plugins,
  toolbar: props.toolbar,
  toolbar_mode: 'wrap',
  font_size_formats: '12px 14px 16px 18px 22px 24px 36px 72px',
  height: props.height,
  placeholder: props.placeholder,
  branding: false,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
  // templates: props.templates,
  quickbars_selection_toolbar: 'forecolor backcolor bold italic underline strikethrough link',
  quickbars_image_toolbar: 'alignleft aligncenter alignright',
  quickbars_insert_toolbar: false,
  image_caption: true,
  image_advtab: true,
  importcss_append: true,
  promotion: false,
  setup: function (editor) {
    console.log('初始化编辑器')
  },
  init_instance_callback: function (editor) {
    console.log('编辑器初始化完成')
  },
  images_upload_handler: function (blobInfo) {
    return new Promise((resolve, reject) => {
      const data = new FormData()
      data.append('file', blobInfo.blob(), blobInfo.filename())
      File.create(data, false)
        .then(({ result }) => {
          console.log(result)
          resolve(result)
        })
        .catch(({ msg }) => {
          console.log(msg)
          reject(msg)
        })
    })
  },
})

const emits = defineEmits(['onClick', 'update:modelValue'])
function onClick(e) {
  emits('onClick', e, tinymce)
}

// 监听富文本内容的变化
watch(
  () => props.modelValue,
  (modelValue) => {
    contentValue.value = modelValue
  }
)
// 监听富文本内容的变化
watch(
  () => contentValue.value,
  (value) => {
    emits('update:modelValue', value)
  }
)
</script>

<style scoped></style>
